<template>
  <div class="record">
    <!-- 顶部 -->
    <div class="feed-top flex between align-center">
      <div class="title">
        <h3>历史反馈</h3>
        <div>您可查看反馈记录以及反馈进度</div>
      </div>
      <div class="rot flex align-center">
        <img src="../../assets/images/home/bot-icon.png" alt="" />
        <div class="cursor" @click="goRobot">机器人助手</div>
      </div>
    </div>
    <!-- /顶部 -->
    <div class="container">
      <div class="records" v-for="(item, index) in historyRecord" :key="index">
        <div class="re-content">
          <span>反馈内容:</span>
          {{ item.feed_content }}
        </div>
        <div class="record-list">
          <div class="re-time flex align-center">
            <span class="dot-gray"></span>
            {{ item.add_time }}
          </div>

          <div class="commit">
            <div>问题已提交</div>
          </div>
        </div>
        <div class="record-list">
          <div class="re-time flex align-center">
            <span class="dot-gray"></span>
            {{ item.add_time }}
          </div>

          <div class="commit">
            <div>
              问题正在等待审核
              <span v-show="!item.examine_content">
                , 点此<span
                  class="cuicu cursor"
                  :class="item.is_urgent == 1 ? 'cuicued' : ''"
                  @click="
                    urge(item.is_urgent, item.id, item.update_time, index)
                  "
                  >催促</span
                >
              </span>
            </div>
            <h4 class="cuicu-tips" v-show="index == clickIndex">
              已催促，我们将尽快给您回复
            </h4>
            <h4 class="cuicu-tips" v-show="index == clickIndex2">
              您在三天内已经催促过了哦
            </h4>
          </div>
        </div>
        <div class="record-list" v-if="item.examine_content">
          <div class="re-time flex align-center">
            <span class="dot-gray"></span>
            {{ item.examine_time }}
          </div>
          <div class="commit">
            <div v-html="item.examine_content"></div>
          </div>
        </div>
      </div>
      <!--       
       <div class="records">
        <div class="re-content">
          <span>反馈内容:</span>
          同心派出所电话错误，应该是027-85391730
        </div>
        <div class="record-list">
          <div class="re-time flex align-center">
            <span class="dot-gray"></span>
            2021/11/30
          </div>

          <div class="commit">
            <div>问题已提交</div>
          </div>
        </div>
        <div class="record-list">
          <div class="re-time flex align-center">
            <span class="dot-gray"></span>
            2021/11/30
          </div>

          <div class="commit">
            <div>
              问题正在等待审核
              <span v-show="false">
                , 点此<span
                  class="cuicu cursor"
                  :class="urgesColor ? 'cuicued' : ''"
                  @click="urge"
                  >催促</span
                >
              </span>
            </div>
            <h4 class="cuicu-tips" v-show="cuicu3">
              已催促，我们将尽快给您回复
            </h4>
            <h4 class="cuicu-tips" v-show="cuicu4">您在三天内已经催促过了哦</h4>
          </div>
        </div>
        <div class="record-list" v-if="true">
          <div class="re-time flex align-center">
            <span class="dot-gray"></span>
            2021/11/30
          </div>
          <div class="commit" v-if="true">
            <div>
              <span style="color: #0066ff">问题已经审核完成</span
              >，您的反馈已核实，我们已对问题进行了修改，点此<span
                @click="checkNet"
                class="cursor"
                style="color: #ff0000"
                >查看</span
              >修改后的页面，非常感谢您的反馈，我们将一直完善我们的服务，给您带来更好的体验，祝您生活愉快~
            </div>
          </div>
          <div class="commit" v-else>
            <div>
              <span style="color: #0066ff">问题已经审核完成</span
              >，问题已经审核完成，非常抱歉，您的反馈存在问题，感谢您的反馈，您可通过电话<span
                style="color: #0066ff"
                >0755-82180123</span
              >联系我们，我们将一直完善我们的服务，给您带来更好的体验，祝您生活愉快~
            </div>
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
export default {
  // name: "record",
  data() {
    return {
      urges: false,
      cuicu: false,
      cuicu2: false,
      cuicu3: false,
      cuicu4: false,
      urgesColor: false,
      historyRecord: [],
      token: "",
      clickIndex: 100,
      clickIndex2: 100,
      cityname: "",
    };
  },
  watch: {
    $route(to) {
      if (to.path == "/record") {
        this.token = localStorage.getItem("token");
        this.getRecord();
      }
    },
  },

  created() {
    let refer = document.referrer;
    this.$http
      .get(
        `http://houtai.wh.bendibao.com/fankui/index.php?ac=getCityName&url=${refer}`
      )
      .then((res) => {
        if (res.data.code === 0) {
          this.cityname = res.data.data.cityname;
        }
      });
    this.token = localStorage.getItem("token");
    this.getRecord();
  },
  methods: {
    getRecord() {
      this.$http
        .get(`?controller=fankui&action=getHistory&token=${this.token}`, {
          headers: { "content-type": "application/x-www-form-urlencoded" },
        })
        .then((res) => {
          if (res.data.code === -1) {
            this.$message(`${res.data.msg}`);
          } else if (res.data.code === -2) {
            localStorage.removeItem("token");
            this.$message.error(`token已过期,2秒后自动跳转到登录页`);
            setTimeout(() => {
              if (this.$route.query.cityname && this.$route.query.url) {
                let cityname = encodeURIComponent(this.$route.query.cityname);
                this.$router.replace(
                  `/login?cityname=${cityname}&url=${this.$route.query.url}`
                );
              } else {
                this.$router.replace(`/login`);
              }
            }, 2000);
          }
          if (res.data.data) {
            res.data.data.forEach((val) => {
              let transformContent = val.examine_content
                .replace(
                  "问题已经审核完成",
                  `<span style="color: #0066ff">问题已经审核完成</span>`
                )
                .replace(
                  "点此查看",
                  `点此<a href='${val.url}' target='_blank' class="cursor" style="color: #ff0000">查看</a>`
                )
                .replace(
                  "0755-82180123",
                  `<span style="color: #0066ff">0755-82180123</span>`
                );

              val.examine_content = transformContent;
            });
            this.historyRecord = res.data.data;
            this.setCookies("tokens");
          }
        });
    },
    urge(urgent, id, addTime, index) {
      // urgent == 0 表示未催促，1表示已经催促过了
      if (urgent == 0) {
        this.$http
          .get(
            `?controller=fankui&action=urgeFeed&token=${this.token}&id=${id}`,
            { headers: { "content-type": "application/x-www-form-urlencoded" } }
          )
          .then((res) => {
            if (res.data.code === 0) {
              this.getRecord();
              this.clickIndex = index;
              setTimeout(() => {
                this.clickIndex = 100;
              }, 3000);
              this.setCookies();
            } else if (res.data.code === -1) {
              this.$message(`${res.data.msg}`);
            } else if (res.data.code === -2) {
              localStorage.removeItem("token");
              this.$message.error(`token已过期,2秒后自动跳转到登录页`);
              setTimeout(() => {
                if (this.$route.query.cityname && this.$route.query.url) {
                  let cityname = encodeURIComponent(this.$route.query.cityname);
                  this.$router.replace(
                    `/login?cityname=${cityname}&url=${this.$route.query.url}`
                  );
                } else {
                  this.$router.replace(`/login`);
                }
              }, 2000);
            }
          });
      } else if (urgent == 1) {
        let nowTime = new Date().getTime();
        let startTime = new Date(addTime).getTime();
        let delayTime = nowTime - startTime;
        if (delayTime <= 259200000) {
          this.clickIndex2 = index;
          setTimeout(() => {
            this.clickIndex2 = 100;
          }, 3000);
        } else {
          this.clickIndex = index;
          setTimeout(() => {
            this.clickIndex = 100;
          }, 3000);
        }
      }
    },

    /**
     * 保存cookie
     */
    setCookies() {
      let date = new Date();
      date.setSeconds(date.getSeconds() + 3600);
      document.cookie = `tokens=${
        this.token
      };Expires=${date.toUTCString()};path=/;domain=.bendibao.com`;
    },

    goRobot() {
      this.$http.get(`?controller=fankui&action=getGzhInfo`).then((res) => {
        if (res.data.code === 0) {
          let city = [];
          res.data.data.forEach((val) => {
            if (
              val.gzh_name.indexOf(this.cityname) !== -1 &&
              this.cityname !== ""
            ) {
              city.push(val);
              // location.href = `http://robot.bendibao.com/?citycode=${val.citycode}&gzh=${val.gzh_account}`
            }
          });
          if (city.length !== 0) {
            window.open(
              `http://robot.bendibao.com/?citycode=${city[0].citycode}&gzh=${city[0].gzh_account}`
            );
          } else {
            window.open(`http://u.bendibao.com/fankui/index.html#/city`);
          }
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
@import url("./record.css");
</style>